<template>
    <view class="w-220 h-120 bg-ffffff rd-14 p-10 fl-co-cen ju-bet" :class="isSelected ? 'when-click' : ''" @click="on_click">
        <wd-text :text="props.chargeItem.name" color="#333" />
        <view class="w-200 h-50 fl-ro-cen ju-bet">
            <wd-text :text="props.chargeItem.price" mode="price" type="error" prefix="￥" />
            <wd-text :text="`/${props.chargeItem.min}分钟`" size="26rpx" />
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    const props = defineProps({
        chargeItem: {
            type: Object,
            default() {
                return {
                    id: null,
                    name: '',
                    price: null,
                    min: null
                };
            }
        },
        isSelected: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['handle_click']); //定义点击事件的名字
    const on_click = () => {
        //发射点击事件
        emit('handle_click', `点击了${props.chargeItem.name}`);
    };
</script>

<style lang="scss">
    .when-click {
        border: 1px solid #0e6eff;
    }
</style>
